<template>
  <view class="field-box border-bottom-after">
    <view :class="['field-label',{'field-label__required':required }]" v-if="label || leftIcon">
      <image class="field-left__icon" v-if="leftIcon" :src="leftIcon" mode="aspectFill" />
      <view class="field-label__text" v-if="label">{{ label }}</view>
    </view>

    <view class="field-value">
      <view class="field-value__control">
        <view class="field-value__readonly" v-if="readonly">{{ inputValue }}</view>
        <template v-else>
         <textarea
            v-if="autosize"
            :class="['field-textarea','inp',{'pointer-events':disabled}]"
            v-model="inputValue"
            :type="type"
            :auto-height="true"
            :autocomplete="autocomplete"
            :readonly="readonly"
            :placeholder="placeholder"
            :disabled="disabled"
            :maxlength="maxlength"
            @focus="focusShow = true"
            @blur="onBlur"
          />

          <input
            v-else
            :class="['field-input','inp',{'pointer-events':disabled}]"
            v-model="inputValue"
            :type="type"
            :autocomplete="autocomplete"
            :readonly="readonly"
            :placeholder="placeholder"
            :disabled="disabled"
            :maxlength="maxlength"
            @focus="focusShow = true"
            @blur="onBlur"
          />
        
          <!-- 清空内容 -->
          <view
            v-show="clearable && inputValue && focusShow"
            @click="$emit('update:modelValue', '')"
            class="field-clearable"
          >
            &#10005
          </view>
        </template>
      </view>

      
     
      
      <template v-if="rightIcon">
       <image class="cell__left-icon" v-if="isImagePath(rightIcon)" :src="rightIcon" mode="widthFix" />
       <text v-else-if="typeof rightIcon === 'string'" :class="['cell__left-icon', 'iconfont', `${rightIcon}`]"></text>
       
       <text v-else class="arrow-right arrow__small cell-right__icon"></text>
      </template>
      
      
      <slot name="extra"></slot>
      <slot name="button"></slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { computed, ref, useAttrs } from 'vue';

interface Props {
  modelValue: string | number;
  type?: string;
  label?: string;
  placeholder?: string;
  autocomplete?: string;
  disabled?: boolean;
  autosize?: boolean;
  maxlength?: number;
  leftIcon?: string;
  clearable?: boolean;
  required ?: boolean;
  readonly?: boolean;
  rightIcon?:  boolean | string ;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  type: 'text',
  label: '',
  placeholder: '请输入文本',
  disabled: false,
  autosize: false,
  autocomplete: 'on',
  maxlength: -1,
  leftIcon: '',
  clearable: false,
  required : false,
  readonly: false,
  rightIcon: false
});

let focusShow = ref(false);

const emits = defineEmits(['update:modelValue']);

const inputValue = computed({
  get() {
    return props.modelValue || '';
  },
  set(v: string) {
    emits('update:modelValue', v);
  }
});

const isImagePath = (path: string) => {
  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'psd', 'tif'];
  const regex = new RegExp(`\\.(${imageExtensions.join('|')})$`, 'i');
  return regex.test(path);
};

const onBlur = () => {
  setTimeout(() => {
    focusShow.value = false;
  }, 200);
}
</script>

<style lang="scss">
@import './index.scss';
</style>
